import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../views/Login/index.vue"),
  },
  {
    path: "/layout",
    name: "layout",
    component: () => import("../views/Layout/index.vue"),
    // layout的子路由，也就是耳二级路由
    children: [
      {
        // 二级路由一般路径前面不加/
        path: "home",
        name: "home",
        component: () => import("../views/Home/index.vue"),
        meta: {
          title: "首页",
          icon: "🏠",
        },
      },
      {
        // 二级路由一般路径前面不加/
        path: "joke",
        name: "joke",
        component: () => import("../views/Joke/index.vue"),
        meta: {
          title: "开心一笑",
          icon: "😀",
        },
      },
      {
        // 二级路由一般路径前面不加/
        path: "hero",
        name: "hero",
        component: () => import("../views/Hero/index.vue"),
        meta: {
          title: "英雄百科",
          icon: "🦹‍♀️",
        },
      },
      {
        // 二级路由一般路径前面不加/
        path: "fruit",
        name: "fruit",
        component: () => import("../views/Fruit/index.vue"),
        meta: {
          title: "水果百科",
          icon: "🍌",
        },
      },
    ],
  },

  {
    path: "/detail/:id",
    name: "detail",
    component: () => import("../views/Detail"),
  },

  {
    path: "*",
    name: "notfound",
    component: () => import("../views/NotFound/index.vue"),
  },
];

// 路由对象
const router = new VueRouter({
  routes,
});

// 所有路由都能触发，进入路由之前触发
// to:    去哪个路由，  的路由信息对象
// from： 从哪个路由来， 的路由信息对象
// next： 是一个函数，调用这个函数代表 放行， 不调用代表不放行
// next有三种用法
//    直接调用： next()     原本想去哪，还是放行去哪
//    传入路径： next(路径)  管你以前去哪，我都给你放行到这个路径
//    不放行  next(false)  不放行，就留在原地

import { getToken } from '@/utils/token'
// 准备一个白名单
const whiteList = ["login", "notfound"];
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在白名单里
  if (whiteList.includes(to.name)) {
    // 直接放行
    next();
  } else {
    // 不在白名单里要判断有没有登录
    // 判断依据是有没有token
    if (getToken()) {
      next();
    } else {
      alert("请先登录！");
      next("/login");
    }
  }
});

// 全局后置守卫
// 这两个参数跟前置守卫是一样，没有next了，因为它已经进来了
router.afterEach((to, from) => {
  // 如果都不为空
  if (to.meta.icon && to.meta.title) {
    // 就拼接
    document.title = to.meta.icon + to.meta.title;
  } else {
    // 有一个为空就只叫案例
    document.title = "案例";
  }
});

export default router;
